<!-- 选人框 -->
<template>
  <div class="pick-container">
    <div
      class="selection"
      v-bind="$attrs"
      :class="{ hide: $attrs.MaskSleSelectData }"
    >
      <Icon type="plus"></Icon>
    </div>
    <div class="main" v-if="$attrs.MaskSleSelectData">
      <div v-for="(item, index) in $attrs.MaskSleSelectData.value" :key="index">
        <el-avatar
          :size="50"
          :src="item.text"
          v-if="item.attribute === 'avatar'"
        />
        <p v-else>
          <span class="label" :style="{ width: `${labelWidth}px` }">{{
            item.label
          }}</span
          ><span>:</span><span class="text">{{ item.text }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Icon from "../Icon/index.vue";
const emit = defineEmits(["headleSelect"]);
const props = defineProps({
  labelWidth: {
    type: Number,
    requiered: true,
  },
});
// const headleSelect = () => {
//     emit("headleSelect",false)
// }
defineOptions({
  inheritAttrs: false,
});

</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.pick-container {
  width: 100%;
  height: 100%;
  position: relative;
  .selection {
    width: 140px;
    border: 2px dashed @dark;
    height: 140px;
    display: flex;
    cursor: pointer;
    position: relative;
    z-index: 999;
    &.hide {
      opacity: 0;
    }
    .icon-container {
      margin: auto;
      font-size: 1.9em;
      color: @dark;
    }
    &:hover {
      border-color: @primary;
      .icon-container {
        color: @primary;
      }
    }
  }

  .main {
    width: 160px;
    height: 140px;
    position: absolute;
    left: 0;
    top: 0;
    .label {
      display: inline-block;
      text-align-last: justify;
      text-align: justify;
      text-justify: distribute;
    }
    span {
      margin: 0 2px;
      &.text {
        font-weight: 600;
        color: @second;
      }
    }
    p {
      margin: 5px 0;
    }
  }
}
</style>